<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>

        // window的load事件在所有资源加载完毕后才会触发，如果包括很多图片或比较大的对象，网络不好的情况下就加载的很慢
        window.addEventListener('load', function() {
            const btn = document.querySelector("button")

            btn.addEventListener("click", function() {
                alert("按钮被点击")
            })
        })

        // 不光可以给界面加载添加事件，可以给任意元素添加加载事件
        // let img = document.querySelector("img")
        // img.addEventListener("load", function() {

        // })


        // DOMContentLoaded会在dom的结构加载完成后就立刻回掉，不用等待资源加载
        document.addEventListener("DOMContentLoaded", function() {

        })
    </script>
</head>
<body>

    <button>点我</button>

    
</body>
</html>